<script setup>
import { toRefs } from 'vue';

const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  }
})
const { item } = toRefs(props);

</script>

<template>
  <div v-if="item" class="product-item">
    <div class="item-img">
      <image class="img" :src="item.image" fit="contain" :alt="item.productName" />
    </div>
    <div class="item-info">
      <div class="item-tit">{{ item.productName }}</div>
      <div class="item-price">￥ <div class="price">{{ item.price }}</div></div>
      <div class="item-number">已售{{ item.users }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.product-item {
  height: 534rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  .item-img {
    margin-bottom: 16rpx;
    .img {
      width: 336rpx;
      height: 336rpx;
      border-radius: 12rpx;
    }
  }
  .item-info{
    padding: 0 20rpx;
    .item-tit {
      font-size: 28rpx;
      color: #3B3B3B;
      line-height: 32rpx;
      height: 64rpx;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 16rpx;
    }
    .item-price {
      display: flex;
      align-items: baseline;
      margin-bottom: 10rpx;
      line-height: 40rpx;
      font-size: 24rpx;
      color: #FF5000;
      .price {
        font-size: 40rpx;
        margin: 0 5rpx;
        font-weight: bold;
      }
    }
    .item-number{
      font-size: 24rpx;
      line-height: 24rpx;
      color: #9F9F9F;
    }
  }
}
</style>
